iOS Chromeのメールアドレスっぽい文字列を自動的にメーラー起動ボタン化する機能が実DOMを更新してしまい、Reactがクラッシュする
iPhoneやiPadのChromeには、メールアドレスっぽい文字列をメーラー起動ボタン化する機能がある
https://scrapbox.io/files/673511673ac23c66bbc99fec.png
この下線が付いている部分がそれ
iOS Chromeがスタイルを勝手に付けている
たぶん単純に下線が付いてるだけではない
タップするとメーラーが起動する
iOS Chromeにはdevtoolが無いので、実際どうなってるかはわからん
CosenseのProject settings画面のメンバーリストには検索機能がある
https://scrapbox.io/files/673511829be123d7345d6e4c.png
検索にマッチした箇所は黄色くハイライトする
Reactで実装している
iOS Chromeのメールアドレスボタン化機能は、実DOMを更新する
Reactが作った実DOMを、Chromeが変更してしまう
それをReactがまた更新しようとすると、クラッシュする
エラーとしてはNotFoundErrorがthrowされる
NotFoundError: The object can not be found here.
更新対象のDOMが見つからないエラー
対策
自動リンク化をやめさせるmetaタグを設置する
<meta name='format-detection' content='email=no,telephone=no,address=no,date=no' />
電話番号、住所、日付なども自動的にリンク化されるようなので、まとめて無効化した
名前欄に電話番号っぽい文字列を書いてみたら、同様に電話かけるボタンになってクラッシュした為
#iOSの闇